@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <table id="table_id_example" class="table table-striped table-bordered">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>名称</th>
                            <th>标识</th>
                            <th>输出类型</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                        <tfoot>
                        <tr>
                            <th>序号</th>
                            <th>名称</th>
                            <th>标识</th>
                            <th>输出类型</th>
                        </tr>
                        </tfoot>
                        <!-- tbody是必须的 -->
                    </table>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('jsEndYield')
    @component('layouts.head.datatables')
    @endcomponent
    @parent
    <script type="text/javascript">
        $(document).ready(function () {
            $('#table_id_example').DataTable({
                "iDisplayLength": 7,//默认每页数量
                "aLengthMenu": [[5, 10, 12, -1], ['5', '10', '12', "所有"] // change per page values here
                ],
                //"bPaginate": true, //翻页功能
                "bLengthChange": true, //改变每页显示数据数量
                //"bFilter" : true, //过滤功能
                "ordering": true,//全局排序
                "bSort": true, //排序功能
                //"bInfo" : true,//页脚信息
                //"bAutoWidth" : true,//自动宽度
                "stateSave": true,
                "retrieve": true,
                "processing": true,
                "serverSide": true,
                //"bPaginate" : true,
                "oLanguage": {
                    "oAria": {
                        "sSortAscending": " - click/return to sort ascending",
                        "sSortDescending": " - click/return to sort descending"
                    },
                    "sLengthMenu": "显示 _MENU_ 记录",
                    "sZeroRecords": "Sorry，查询不到任何相关数据",
                    "sEmptyTable": "未有相关数据",
                    "sLoadingRecords": "正在加载数据-请等待...",
                    "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录。",
                    "sInfoEmpty": "当前显示0到0条，共0条记录",
                    "sInfoFiltered": "（数据库中共为 _MAX_ 条记录）",
                    "sProcessing": "<img src='{{asset("images/loading_bar.gif")}}'/>",
                    "sSearch": "模糊查询：",
                    "sUrl": "",
                    //多语言配置文件，可将oLanguage的设置放在一个txt文件中，例：Javascript/datatable/dtCH.txt
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": " 上一页 ",
                        "sNext": " 下一页 ",
                        "sLast": " 尾页 "
                    }
                },
                ajax: {
                    //指定数据源
                    url: "{{url("laravel/ue/postDataForPlaceholderList")}}",
                    type: "POST",
                    data: function (data) {
                        data._token = "{{ csrf_token() }}";
                    }
                },
                "paging": true,//开启表格分页
                //每页显示三条数据
                pageLength: 3,
                columns: [
                    {
                        'data': "id"
                    },
                    {
                        'data': "placeholder_name"
                    },
                    {
                        'data': "placeholder_code"
                    },
                    {
                        'data': "placeholder_type_name"
                    }],
                "columnDefs": [{
                    // "visible": false,
                    //"targets": 0
                },
                    /*{
                     "targets": 2,
                     "render": function(data, type, row, meta) {
                     console.log(row)
                     //渲染 把数据源中的标题和url组成超链接
                     //return '<a href="' + data + '" target="_blank">' + row.placeholder_code + '</a>';
                     return '<button onclick="insertCode(\'' + data + '\')">' + row.placeholder_code + '</button>';
                     },
                     //指定是第三列

                     }, */{
                        //设置第一列不参与搜索
                        "targets": [3],
                        "searchable": false,
                        "orderable": false
                    }],

            })
        });
    </script>
@endsection